<template>
  <div>
    <van-cell>
      <van-image
        slot="icon"
        round
        width="30"
        height="30"
        style="margin-right: 10px"
        :src="comment.aut_photo"
      />
      <span style="color: #466b9d" slot="title">{{ comment.aut_name }}</span>
      <div slot="label">
        <p style="color: #363636">{{ comment.content }}</p>
        <p>
          <span style="margin-right: 10px">{{
            comment.pubdate | yearsage
          }}</span>
          <van-button
            @click="$emit('information', comment)"
            size="mini"
            type="default"
            >回复{{ comment.reply_count }}
            <template>
              <van-icon name="arrow" />
            </template>
          </van-button>
        </p>
      </div>
      <template>
        <van-button
          @click="commentLike(comment.com_id)"
          class="like-btn"
          :class="{
            liked: comment.is_liking
          }"
          :icon="comment.is_liking ? 'good-job' : 'good-job-o'"
          >{{ comment.like_count || '赞' }}</van-button
        ></template
      >
    </van-cell>
  </div>
</template>

<script>
import { getComments, addCommentLike, removeCommentLike } from '@/api/comment'

export default {
  name: 'CommentItem',
  props: {
    comment: {
      type: Object
    }
  },
  data() {
    return {
      isReplyShow: false
    }
  },
  methods: {
    async commentLike(comid) {
      try {
        if (this.comment.is_liking) {
          // 取消点赞
          await removeCommentLike(comid)
          this.comment.like_count--
        } else {
          // 点赞
          const a = await addCommentLike({
            target: comid
          })
          console.log(a)
          this.comment.like_count++
        }
        this.comment.is_liking = !this.comment.is_liking
      } catch (error) {}
    },
    // 评论回复
    async replyComment(id) {
      try {
        const { data } = await getComments({
          type: 'c',
          source: id
        })
        console.log(data)
      } catch (error) {}
    }
  }
}
</script>

<style lang="less" scoped>
.like-btn {
  height: 30px;
  padding: 0;
  border: none;
  font-size: 19px;
  line-height: 30px;
  margin-right: 7px;
  .van-icon {
    font-size: 30px;
  }
  &.liked {
    color: #e5645f;
  }
}
</style>
